<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <select class="province">
    <option value="">请选择省份</option>
    <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
  </select>
  <select class="city" name="" id="">
    <option value="">请选择市/区</option>
    <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
  </select>

</body>
<script>
  // 1. 页面加载时 根据数据生成省份
  // 2. 省份切换时, 通过当前省份id找到对应的省份数据 => 得到该省下市区集合 => 动态生成市区
  // 3. select的html 结构 也是用 innerHTML    
  //      value 用于获取被选中的option的值

  var proSel = document.getElementsByClassName("province")[0];
  var citySel = document.getElementsByClassName("city")[0];



  var xhr = new XMLHttpRequest();  //0

  xhr.open("get", "../date/pro.json", true);  // 1

  xhr.send();

  xhr.onreadystatechange = function () {
    // 2  3   4 
    if (xhr.readyState == 4 && xhr.status == 200) {
      var text = xhr.responseText;
      console.log(text);
      var data = JSON.parse(text);
      console.log(data);

      var { list: proList } = data;
      console.log(proList);

      var html = '<option value="">请选择省份</option>';
      // proList.forEach(function(item){
      //     var {city_id,city_name} = item;
      //     html+=`<option value="${city_id}">${city_name}</option>`;
      // })

      // 如果函数的参数也是数组和对象 => 可以直接对该参数进行结构
      // proList.forEach(function({city_id,city_name} = item){
      //     console.log(item);
      //     html+=`<option value="${city_id}">${city_name}</option>`;
      // })
      proList.forEach(function ({ city_id, city_name }) {
        // console.log(item);
        html += `<option value="${city_id}">${city_name}</option>`;
      })
      // proList.forEach(({city_id,city_name}) => {
      //     console.log(item);
      //     html+=`<option value="${city_id}">${city_name}</option>`;
      // })

      proSel.innerHTML = html;


    }
  }


</script>

</html>